<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .product-num {
      display: inline-block;
      width: 60px;
    }
  </style>
</head>
<body>
  <div id="app">
    <table border="1">
      <thead>
        <tr>
          <th><input type="checkbox" id="checkall"></th>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <tr v-for="(pro,index) in cartInfo.cartModels">
          <td><input type="checkbox" class="check-item"></td>
          <td>{{pro.name}}</td>
          <td class="product-price">{{pro.price.toFixed(2)}}</td>
          <td>
            <button class="btn" @click="pro.num>1?pro.num--: ''">-</button>
            <input class="product-num" :data-index="index" v-model="pro.num">
            <button class="btn" @click="pro.num ++">+</button>
          </td>
          <td class="product-sum">{{(pro.price * pro.num).toFixed(2)}}</td>
        </tr>
        <tr>
          <td colspan="3">总计</td>
          <td id="totalnum">{{totalNum}}</td>
          <td id="totalprice">{{totalPrice}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        cartInfo: {}
      },
      computed: {
        totalNum: function() {
          let num = 0;
          this.cartInfo.cartModels.forEach(item => {
            num += item.num
          })
          return num
        },
        totalPrice: function() {
          let num = 0;
          this.cartInfo.cartModels.forEach(item => {
            num += item.num * item.price
          })
          return num
        }
      },
      created() {
        this.getData();
      },
      methods: {
        getData() {
          // $.ajax({
          //   url: 'xxxx',
          //   type: 'POST',
          //   data: {

          //   },
          //   success: function(res) {
                // this.cartInfo = res.data
          //   }
          // })
          this.cartInfo = {"cartModels":[{"productId":"100018955","name":"WORKPRO/万克宝-136PC 电钻组套(小)-(W004509N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/4/2b517b55-3519-4595-96f6-fd0279d19e8e-thumbnail.jpg","price":199.0,"num":14,"sum":2786.00},{"productId":"100009828","name":"世达 V顶ABS标准安全帽 黄色 /1顶","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/6/1b762d34-ab42-45af-9e9d-1d7064de8585-170.jpg","price":27.37,"num":2,"sum":54.74},{"productId":"100018897","name":"WORKPRO/万克宝-综合工具组套 9PC 家用组套五金维修工具-(W009046N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/185ef417-cb9b-4b40-88c1-5f3866769c19-170.jpg","price":50.0,"num":2,"sum":100.00},{"productId":"100012580","name":"DCA-电磨头S1J-FF03-10 可调速直磨打磨机-(1302020020)/1把","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/7/d956efe9-4f6f-4f71-a64d-99a9ff9da69c-170.jpg","price":145.0,"num":1,"sum":145.00},{"productId":"100012749","name":"DREMEL/琢美-电磨机 雕刻 打磨机组套 4000-3/36-(F0134000RA)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/3e320e21-8ca3-48d9-bbe1-e3ef7a21c3f0-thumbnail.jpg","price":879.0,"num":1,"sum":879.00},{"productId":"100019570","name":"WORKPRO/万克宝-工具组套 30PC-(W009047N)/1套","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/5/445b9bdc-c1f6-4c50-9d4a-0d1b941d4e2f-thumbnail.jpg","price":122.0,"num":4,"sum":488.00},{"productId":"100000314","name":"东成-240W电磨机电磨头雕刻工具木雕根雕电动抛光打磨机直磨机 S1J-FF-25-(1301020030)/1台","imageUrl":"//image.toolmall.com/image/toolmallPc/proudct/prouctView/2018/2/d2de6401-5aee-40d9-a79b-de10b0840797-170.jpg","price":151.0,"num":1,"sum":151.00}],"disabledCartModels":[],"totalPrice":4603.74}
        }
      },
    })
  </script>
</body>
</html>